<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper div:nth-child(odd) {
            background: skyblue;
        }
        .wrapper div:nth-child(even) {
            background: pink;
        }
        .wrapper {
            display: grid;
            /* 把网格项目分为3列 */
            /* grid-template-columns: 100px 100px 100px; */
            /* fr 新单位，自适应宽度，把网格项目平均分配父容器的宽度 */
            /* grid-template-columns: 1fr 1fr 1fr; */
            /* 简写 表示3列，每一列占一份 */
            /* grid-template-columns: repeat(3, 1fr); */
            /* 第一列固定宽度300px 剩下两列平均分配 */
            grid-template-columns: 300px repeat(2, 1fr);
            /* grid-auto-rows 设置项目高度 */
            /* grid-auto-rows: 100px; */
            /* 最小高度为50px的项目 最大高度自动 */
            grid-auto-rows: minmax(50px, auto);
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div>一</div>
        <div>二</div>
        <div>三</div>
        <div>四</div>
        <div>五</div>
    </div>
    <style>
        .box div:nth-child(odd) {
            background: rgb(220, 235, 135);
            border: 1px solid #666;
        }
        .box div:nth-child(even) {
            background: rgb(246, 108, 225);
            border: 1px solid #666;
        }
        .box {
            margin-top: 20px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: 50px;
            /* 网格间距 */
            /* 列间距 */
            column-gap: 5px;
            /* 行间距 */
            row-gap: 15px;
        }
        .box .box1 {
            /* 跨轨道方式项目（列合并）
            表示box1项目跨越了3条轨道
            */
            grid-column-start: 1;
            grid-column-end: 4;
            /* 
            /* 跨轨道方式项目（行合并）
            表示box1项目跨越了2条轨道
            */
            grid-row-start: 1;
            grid-row-end: 3;
        }
        /* box1代码简写 */
        .box .box1 {
            /* 列合并（合并了3列）1表示开始轨道 4表示结束轨道 */
            grid-column: 1/4;
            /* 行合并（合并了两行）1表示开始轨道 3表示结束轨道 */
            grid-row: 1/3;
        }
        .box .box2 {
            grid-column-start: 1;
            /* grid-row-start: 3;
            grid-row-end: 5; */
            /* 简写 */
            grid-row: 3/5;
        }
    </style>
    <div class="box">
        <div class="box1">一</div>
        <div class="box2">二</div>
        <div class="box3">三</div>
        <div class="box4">四</div>
        <div class="box5">五</div>
    </div>

    <style>
        /* 网格嵌套 */
        .web div:nth-child(odd) {
            background: rgb(135, 235, 140);
            border: 1px solid #666;
        }
        .web div:nth-child(even) {
            background: rgb(108, 152, 246);
            border: 1px solid #666;
        }
        .web {
            margin-top: 20px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: minmax(50px, auto);
            row-gap: 5px;
            column-gap: 5px;
        }
        .web .box1 {
            grid-column: 1/4;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            column-gap: 10px;
            padding: 10px;
            /* 
            普网格通嵌套 子网格和父网格的轨道是不一致的 
            通过设置subgrid值，使得子网格的轨道和父网格轨道一致
            注：可以注释掉下面一行代码进行观察效果区别
            */
            grid-template-columns: subgrid;
        }
        .web .box1 >div {
            background-color: antiquewhite;
        }
    </style>
    <div class="web">
        <div class="box1">
            <div class="son1">a</div>
            <div class="son2">b</div>
            <div class="son3">c</div>
        </div>
        <div class="box2">二</div>
        <div class="box3">三</div>
        <div class="box4">四</div>
        <div class="box5">五</div>
    </div>
    <style>
        .web-box div:nth-child(odd) {
            background: rgb(177, 52, 240);
            border: 1px solid #666;
        }
        .web-box div:nth-child(even) {
            background: rgb(235, 237, 96);
            border: 1px solid #666;
        }
        /* 使用 z-index 控制层级

        */
        .web-box {
            margin-top: 20px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: 50px;
        }
        /* 
        box1和box2有重合的单元格，默认后面的单元格覆盖前面的单元格
        也可通过z-index控制层级,z-index值越大层级越高
        
        */
        .web-box .box1 {
            grid-column: 1/4;
            grid-row: 1/3;
            z-index: 2;
        }
        .web-box .box2 {
            grid-column-start: 1;
            grid-row: 2/4;
            z-index: 1;
        }
    </style>
    <div class="web-box">
        <div class="box-item box1">一</div>
        <div class="box-item box2">二</div>
        <div class="box-item box3">三</div>
        <div class="box-item box4">四</div>
        <div class="box-item box5">五</div>
    </div>
    <style>
        .wrapper-box div:nth-child(odd) {
            background: rgb(200, 183, 208);
            border: 1px solid #666;
        }
        .wrapper-box div:nth-child(even) {
            background: rgb(64, 178, 72);
            border: 1px solid #666;
        }
        .wrapper-box {
            margin-top: 20px;
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-auto-rows: 50px;
            column-gap: 5px;
            row-gap: 5px;
        }
        .wrapper-box .box1 {
            /* 列合并 */
            /* grid-column: 1/4; */
            /* 行合并 */
            /* grid-row: 1/3; */

            /* 上面列合并和行合并可以简写为如下：
            grid-area: grid-row-start/grid-column-start/
             grid-row-end/grid-column-end;

            */
            grid-area: 1/1/3/4;
        }

    </style>
    <div class="wrapper-box">
        <div class="box-item box1">一</div>
        <div class="box-item box2">二</div>
        <div class="box-item box3">三</div>
        <div class="box-item box4">四</div>
        <div class="box-item box5">五</div>
    </div>

    
</body>
</html>